  <template>
    <div>
      <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />

      <van-grid column-num="5" :border="false">
        <van-grid-item v-for="(v) in menus" :key="v.id" :icon="v.image" :text="v.title"></van-grid-item>
      </van-grid>

      <div class="banners">
        <div class="banner-item" v-for="(v, i) in banners" :key="i">
          <img :src="v" alt="">
        </div>
      </div>

      <div class="lists">
        <div class="list-item" @click="toDetail(v.id)" v-for="(v) in lists" :key="v.id">
          <img :src="v.image" alt="">
          <h4>{{ v.title }}</h4>
          <p class="desc">{{ v.desc }}</p>
          <div class="score">
            <van-rate v-model="v.score" :size="10" color="#ffd21e" void-icon="star" void-color="#eee" readonly allow-half/>
            <span>{{ v.count }}人评价</span>
          </div>
        </div>
      </div>
    </div>
  </template>


<script setup>
import axios from 'axios';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const menus = ref([])
const banners = ref([])
const lists = ref([])
const router = useRouter()
const toDetail = id => {
  // /detail/:id
  // 路由跳转
  router.push(`/detail/${id}`);
}

const _getMenus = async () => {
  const resp = await axios.get('/api/menus')
  console.log(resp.data.data)
  menus.value = resp.data.data
}
const _getBanners = async () => {
  const resp = await axios.get('/api/banners');
  console.log(resp.data.data)
  banners.value = resp.data.data
}
const _getLists = async () => {
  const resp = await axios.get('/api/lists');
  console.log(resp.data.data)
  lists.value = resp.data.data
}


_getMenus()
_getBanners()
_getLists()

</script>


<script>
export default { 
  name: 'HomeIndex',
 }
</script>

<style scoped lang="scss">
.lists {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  overflow-x: scroll;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0; // 对于Webkit浏览器，将滚动条宽度设置为0
    height: 0; // 对于Webkit浏览器，将滚动条高度设置为0
    background: transparent; // 滚动条背景透明
  }

  .list-item {
    flex-shrink: 0;
    width: 150px;
    overflow: hidden;
    padding: 10px;
    margin-right: 10px;
    .desc {
      font-size: 12px;
    }

    img {
      width: 100%;
    }

    .score {
      font-size: 10px;
      display: flex;
    }
  }
}

.banners {
  display: flex;
  flex-wrap: nowrap;
  width: 100vw;
  overflow-x: scroll;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0; // 对于Webkit浏览器，将滚动条宽度设置为0
    height: 0; // 对于Webkit浏览器，将滚动条高度设置为0
    background: transparent; // 滚动条背景透明
  }

  .banner-item {
    img {
      height: 100px;
      margin: 20px;
      border-radius: 20px;
    }
  }
}
</style>